<template>
  <div>
    <header class="header">
      <div class="left" @click="$router.back()"></div>
      <p class="title">注册</p>
    </header>

    <div class="re_form wrap">
      <div class="input">
        <input placeholder="手机号" @blur="tel_rsg" class="tel" />
        <input placeholder="昵称" @blur="name_rsg" class="name" />
        <input placeholder="密码" @blur="psw_rsg" class="psw" />
      </div>

      <div class="checkbox">
        <div :class="['check', { con: agree }]" @click="agree = !agree"></div>
        <div class="text">
          同意
          <a
            href="https://terms.alicdn.com/legal-agreement/terms/suit_bu1_other/suit_bu1_other202009181421_79060.html"
            target="_blank"
            >《阿里文学说用户服务协议》</a
          >
          &nbsp;和&nbsp;
          <a
            href="https://terms.alicdn.com/legal-agreement/terms/suit_bu1_other/suit_bu1_other202009211152_29404.html"
            target="_blank"
            >《隐私服务协议》</a
          >
        </div>
      </div>
    </div>

    <footer>
      <div
        :class="['nextbox', 'wrap', { disabled: !isRegisetr }]"
        @click="toLogin"
      >
        <span>下一步</span>
      </div>
    </footer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: "",
      tel: "",
      password: "",
      userInfo: null,
      agree: false,
    };
  },
  methods: {
    // 验证手机号格式
    tel_rsg(e) {
      let rsg =
        /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;

      if (rsg.test(e.target.value)) {
        this.tel = e.target.value;
      } else {
        this.tel = "";
        this.$toast("请输入正确格式的账号");
      }
    },
    // 验证密码格式
    psw_rsg(e) {
      let rsg = /^[0-9a-zA-z]\w{5,15}$/;
      if (rsg.test(e.target.value)) {
        this.password = e.target.value;
      } else {
        this.password = "";
        this.$toast("密码格式为6-16位数字字母组合");
      }
    },
    // 验证昵称格式
    name_rsg(e) {
      let name = e.target.value;
      if (name) {
        this.username = name;
      }
    },
    // 验证用户是否存在
    toLogin() {
      let { username, tel, password, agree, userInfo } = this; //解构

      if (username && tel && password && agree) {
        if (tel in userInfo) {
          this.$toast("该账号已存在");
          this.$router.push("/login");
        } else {
          this.userInfo[tel] = {
            username,
            password,
            balance: 0,
            bookList: [],
          };
          localStorage.setItem("userInfo", JSON.stringify(userInfo));
          this.$toast("注册成功，请登录");
          this.$router.push("/login");
        }
      }
    },
    // 此时可以自行将文件上传至服务器
    afterRead(file) {
      console.log(file);
    },
  },
  computed: {
    isRegisetr() {
      let { username, tel, password, agree } = this;
      return username && tel && password && agree;
    },
  },
  created() {
    this.userInfo = JSON.parse(localStorage.getItem("userInfo"));
    console.log(this.userInfo);
  },
};
</script>

<style lang="scss" scoped>
header.header {
  height: 50px;
  text-align: center;
  border-bottom: 2px solid #f0f0f0;
  position: relative;
  padding: 0;

  > .left {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 15px;
    margin: auto;
    transform: rotate(180deg);
    background: url(https://easyreadfs.nosdn.127.net/web/trunk/1533607652166/icon_return.png)
      no-repeat;
    background-size: contain;
    width: 12px;
    height: 20px;
  }

  > .title {
    color: #333;
    font-weight: bold;
    line-height: 50px;
    font-size: 18px;
  }
}

.re_form {
  display: flex;
  flex-wrap: wrap;
  padding: 20px 20px 0px;

  > .input {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    > input {
      position: relative;
      border: 0;
      box-sizing: border-box;
      width: 49%;
      height: 44px;
      padding: 12px 13px;
      background: #f7f7fa;
      border-radius: 4px;
      font-size: 14px;
      margin-bottom: 20px;

      &::placeholder {
        color: #ccc;
      }

      &.tel {
        width: 100%;
      }
    }
  }

  > .slider {
    width: 100%;
    height: 45px;
    line-height: 45px;
    text-align: center;
    position: relative;
    background: #f7f7fa;
    border-radius: 4px;
    font-size: 16px;
    color: #333;
    margin-bottom: 12px;

    > .mask {
      position: absolute;
      background: #23b383;
      height: 100%;
    }

    > .bar {
      z-index: 10;
      background: #fff;
      position: absolute;
      left: 0;
      top: 0px;
      border-radius: 4px;
      width: 43px;
      height: 43px;
      border: 1px solid #23b383;

      > i.iconfont {
        color: #23b383;
        position: absolute;
        left: -3px;
        margin: auto;
        font-size: 38px;
        font-weight: lighter;

        &:nth-child(2) {
          left: 8px;
        }
      }
    }
  }

  > .checkbox {
    height: 28px;
    width: 100%;
    display: flex;
    align-items: center;

    > .check {
      width: 20px;
      height: 20px;
      background-image: url(../assets/imgs/check1.png);
      background-size: contain;
      margin-right: 5px;

      &.con {
        background-image: url(../assets/imgs/check2.png);
      }
    }

    > .text {
      height: 28px;
      line-height: 28px;
      flex: 1;
      font-size: 12px;
      color: #a1a1a1;
      overflow: hidden;

      > a {
        color: #23b383;
      }
    }
  }
}

footer {
  box-sizing: border-box;
  width: 100%;
  padding: 0 20px;

  .nextbox {
    width: 100%;
    font-size: 14px;
    margin-top: 47px;
    height: 44px;
    line-height: 44px;
    text-align: center;
    border-radius: 8px;
    background-color: #23b383;
    color: #fff;

    &.disabled {
      opacity: 0.5;
    }
  }
}
</style>